<template>
    <view>
        <div style="padding: 15px;">
            <u-form ref="validateFormRef" :model="validateForm.value" :label-width="150">
                <u-form-item label="商品缩略图" prop="sysFileId" required>
                    <u-upload ref="uUpload" :multiple="false" :auto-upload="false" :max-count="1" :show-progress="false"
                              @on-remove="onRemove($event)" @on-choose-complete="onChooseComplete($event)"></u-upload>
                </u-form-item>
                <u-form-item label="系统分类" prop="storeClassId">
                    <u-input type="select" :select-open="validateForm.controls.storeClassId.isShow"
                             v-model="validateForm.controls.storeClassId.textDesc"
                             placeholder="请选择系统分类" @click="validateForm.controls.storeClassId.isShow = true; $forceUpdate();"></u-input>
                </u-form-item>
                <u-form-item label="商品分类" prop="goodsClassId">
                    <u-input type="select" :select-open="validateForm.controls.goodsClassId.isShow"
                             v-model="validateForm.controls.goodsClassId.textDesc"
                             placeholder="请选择商品分类" @click="validateForm.controls.goodsClassId.isShow = true; $forceUpdate();"></u-input>
                </u-form-item>
                <u-form-item label="编码" prop="code">
                    <u-input v-model="validateForm.value.code" placeholder="请输入编码"/>
                </u-form-item>
                <u-form-item label="标题" prop="title">
                    <u-input v-model="validateForm.value.title" placeholder="请输入标题"/>
                </u-form-item>
                <u-form-item label="副标题" prop="subTitle">
                    <u-input v-model="validateForm.value.subTitle" placeholder="请输入副标题"/>
                </u-form-item>
                <u-form-item label="状态" prop="status">
                    <u-input type="select" :select-open="validateForm.controls.status.isShow"
                             v-model="validateForm.controls.status.textDesc"
                             placeholder="请选择状态" @click="validateForm.controls.status.isShow = true; $forceUpdate();"></u-input>
                </u-form-item>
                <u-form-item label="显示顺序" prop="displayOrder">
                    <u-input v-model="validateForm.value.displayOrder" placeholder="请输入显示顺序"/>
                </u-form-item>
                <u-form-item label="备注" prop="remark">
                    <u-input type="textarea" height="40" v-model="validateForm.value.remark" placeholder="请输入备注"/>
                </u-form-item>
            </u-form>
        </div>

        <u-select mode="mutil-column-auto" label-name="name" value-name="code" :mask-close-able="false" v-if="validateForm.controls.storeClassId.isShow"
                  v-model="validateForm.controls.storeClassId.isShow" :list="validateForm.controls.storeClassId.options"
                  :default-value="validateForm.controls.storeClassId.defaultValue"
                  @cancel="validateForm.controls.storeClassId.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.selectMutilColumnConfirm($event, validateForm.controls.storeClassId)"></u-select>

        <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false" v-if="validateForm.controls.goodsClassId.isShow"
                  v-model="validateForm.controls.goodsClassId.isShow" :list="validateForm.controls.goodsClassId.options"
                  :default-value="validateForm.controls.goodsClassId.defaultValue"
                  @cancel="validateForm.controls.goodsClassId.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.goodsClassId)"></u-select>

        <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false" v-if="validateForm.controls.status.isShow"
                  v-model="validateForm.controls.status.isShow" :list="validateForm.controls.status.options"
                  :default-value="validateForm.controls.status.defaultValue"
                  @cancel="validateForm.controls.status.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.status)"></u-select>

        <u-card :full="true" :show-foot="false" style="margin-bottom: 10px;">
            <view class="" slot="head">
                商品规格颜色
            </view>
            <view class="" slot="body">
                <u-card :full="true" style="margin-bottom: 10px;">
                    <view class="" slot="head">
                        商品规格（必选，存在商品颜色时将展示商品颜色的产品图片）
                    </view>
                    <view class="" slot="body">
                        <storePlatformGoodsManageGoodsSpecification ref="storePlatformGoodsManageGoodsSpecificationRef"
                                                                    :goodsId="validateForm.value.id"></storePlatformGoodsManageGoodsSpecification>
                    </view>
                    <view class="" slot="foot">
                    </view>
                </u-card>
                <u-card :full="true" :show-foot="false" style="margin-bottom: 10px;">
                    <view class="" slot="head">
                        商品颜色（可选，无需区分商品颜色时可不填）
                    </view>
                    <view class="" slot="body">
                        <storePlatformGoodsManageGoodsColor ref="storePlatformGoodsManageGoodsColorRef"
                                                            :goodsId="validateForm.value.id"></storePlatformGoodsManageGoodsColor>
                    </view>
                    <view class="" slot="foot">
                    </view>
                </u-card>
                <u-card :full="true" :show-foot="false" style="margin-bottom: 10px;">
                    <view class="" slot="head">
                        商品规格与商品颜色关联（可选，存在商品颜色时必选）
                    </view>
                    <view class="" slot="body">
                        <storePlatformGoodsManageGoodsSpecificationColor
                                ref="storePlatformGoodsManageGoodsSpecificationColorRef"
                                :goodsId="validateForm.value.id"></storePlatformGoodsManageGoodsSpecificationColor>
                    </view>
                    <view class="" slot="foot">
                    </view>
                </u-card>
            </view>
            <view class="" slot="foot">
            </view>
        </u-card>

        <u-card :full="true" :show-foot="false" style="margin-bottom: 10px;">
            <view class="" slot="head">
                商品详情商品轮播图片
            </view>
            <view class="" slot="body">
                <storePlatformGoodsManageGoodsHead ref="storePlatformGoodsManageGoodsHeadRef"
                                                   :goodsId="validateForm.value.id" :isGoodsEdit="false"></storePlatformGoodsManageGoodsHead>
            </view>
            <view class="" slot="foot">
            </view>
        </u-card>

        <u-card :full="true" :show-foot="false" style="margin-bottom: 10px;">
            <view class="" slot="head">
                商品详情描述
            </view>
            <view class="" slot="body">
                <storePlatformGoodsManageGoodsDetail ref="storePlatformGoodsManageGoodsDetailRef"
                                                     :goodsId="validateForm.value.id" :isGoodsEdit="false"></storePlatformGoodsManageGoodsDetail>
            </view>
            <view class="" slot="foot">
            </view>
        </u-card>

        <u-card :full="true" :show-foot="false" style="margin-bottom: 10px;">
            <view class="" slot="head">
                商品售后服务
            </view>
            <view class="" slot="body">
                <storePlatformGoodsManageGoodsAfterSale ref="storePlatformGoodsManageGoodsAfterSaleRef"
                                                        :goodsId="validateForm.value.id"></storePlatformGoodsManageGoodsAfterSale>
            </view>
            <view class="" slot="foot">
            </view>
        </u-card>

        <div style="padding: 15px;">
            <u-button type="error" @click="submit">提交</u-button>
        </div>
    </view>
</template>

<script>
    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {UFormUtil} from "@/dev/core/utils/u-form.util";
    import {QiniuCloudUtil} from "@/dev/core/utils/qiniu-cloud.util";
    import {SysFileService} from "@/dev/services/sys-file.service";
    import {TbGoodsService} from "@/dev/services/tb-goods.service";
    import {CommonService} from "@/dev/services/common.service";
    import storePlatformGoodsManageGoodsSpecification from '../store-platform-goods-specification/index.vue';
    import storePlatformGoodsManageGoodsColor from '../store-platform-goods-color/index.vue';
    import storePlatformGoodsManageGoodsSpecificationColor from '../store-platform-goods-specification-color/index.vue';
    import storePlatformGoodsManageGoodsHead from '../store-platform-goods-head/index.vue';
    import storePlatformGoodsManageGoodsDetail from '../store-platform-goods-detail/index.vue';
    import storePlatformGoodsManageGoodsAfterSale from '../store-platform-goods-after-sale/index.vue';

    export default {
        data() {
            return {
                validateForm: {
                    value: {
                        id: CommonUtil.randomUUID(),
                        sysFileId: '',  // 图片sysFile.id
                        communityId: this.globalVariable.userInfo.tbStore.communityId,
                        storeId: this.globalVariable.userInfo.tbStore.id,
                        storeClassId: '',
                        goodsClassId: '',
                        code: '',
                        salesVolume: 0,
                        title: '',
                        subTitle: '',
                        displayOrder: '',
                        status: "1",
                        remark: '',
                    },
                    rules: {
                        sysFileId: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']}
                        ],
                        storeClassId: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']}
                        ],
                        goodsClassId: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']}
                        ],
                        code: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']},
                            {
                                trigger: ['blur'],
                                asyncValidator: (rule, value, callback) => {
                                    new CommonService().uniqueCheckByFields({
                                        "tableName": "tb_goods",
                                        "fieldList": [
                                            {"fieldName": "store_id", "fieldValue": this.validateForm.value.storeId},
                                            {"fieldName": "code", "fieldValue": value},
                                        ],
                                        "excludeId": null
                                    }).then(result => {
                                        if (result.status === "fail") {
                                            callback(new Error('输入编号已存在！'))
                                        } else {
                                            callback()
                                        }
                                    })
                                }
                            }
                        ],
                        title: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']}
                        ],
                        displayOrder: [
                            {
                                pattern: /^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
                                message: '请输入大于0的正数!',
                                trigger: ['change', 'blur']
                            }
                        ],
                    }
                }
            }
        },
        components: {
            storePlatformGoodsManageGoodsSpecification,
            storePlatformGoodsManageGoodsColor,
            storePlatformGoodsManageGoodsSpecificationColor,
            storePlatformGoodsManageGoodsHead,
            storePlatformGoodsManageGoodsDetail,
            storePlatformGoodsManageGoodsAfterSale,
        },
        onReady() {
            const _self = this;
            UFormUtil.setOptions(_self.validateForm.controls.storeClassId, this.objParams.storeClassIdOptions, 2);
            UFormUtil.setOptions(_self.validateForm.controls.goodsClassId, this.objParams.goodsClassIdOptions);
            UFormUtil.setOptions(_self.validateForm.controls.status, this.objParams.statusOptions);
            _self.$forceUpdate();
        },
        onShow() {
            const _self = this;

        },
        methods: {
            onRemove($event) {
                console.log($event);
                const _self = this;
                new SysFileService().deleteSysFile({
                    id: _self.validateForm.value.sysFileId
                }).then(result => {
                    _self.validateForm.value.sysFileId = '';
                    UFormUtil.validation(_self.$refs.validateFormRef, 'sysFileId');
                    CommonUtil.toast("图片删除成功");
                    _self.$forceUpdate()
                });
            },
            onChooseComplete($event) {
                console.log($event);
                const _self = this;
                QiniuCloudUtil.uploadToCloud(_self.validateForm.value.id, $event[$event.length - 1].file.path).then(result => {
                    if (result.status === "success") {
                        _self.validateForm.value.sysFileId = result.id;
                        CommonUtil.toast(result.message);
                    } else {
                        CommonUtil.alert(result.message);
                    }
                    UFormUtil.validation(_self.$refs.validateFormRef, 'sysFileId');
                });
            },
            submit() {
                const _self = this;
                this.$refs.validateFormRef.validate(valid => {
                    if (valid) {
                        console.log('验证通过', _self.validateForm.value);
                        CommonUtil.alert({
                            title: '提示！',
                            content: '确认提交吗？',
                            showCancel: true, // 是否显示取消按钮
                            success: function (res) {
                                if (res.cancel) { // 点击取消,默认隐藏弹框
                                } else { // 点击确定
                                    new TbGoodsService().isValidGoods(_self.validateForm.value).then(result => {
                                        if (result.status === "fail") {
                                            CommonUtil.alert(JSON.stringify(result.errorMsgList));
                                        } else {
                                            new TbGoodsService().saveTbGoods(_self.validateForm.value).then(result => {
                                                CommonUtil.toastNavigateBack('保存成功')
                                            });
                                        }
                                    });
                                }
                            }
                        });
                    } else {
                        console.log('验证失败');
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>
